<template>
  <div style="width: 950px; margin: auto">
    <el-card> 收货地址 </el-card>
    <el-card>
      <div>
        <el-row style="text-align: right">
          <el-button @click="addAddress">新增收货地址+</el-button>
        </el-row>
        <el-row>
          <div class="adressList">
            <ul>
              <li v-for="(item, index) in addressInfo" :key="item.id">
                <el-card shadow="hover">
                  <div slot="header" class="clearfix">
                    <i class="el-icon-user-solid"></i>
                    <span>{{ item.recipients }}</span>
                  </div>
                  <span>
                    <i class="el-icon-location-information"></i>
                    {{ item.address }}
                  </span>
                  <br />
                  <span>
                    <i class="el-icon-mobile-phone"></i>
                    {{ item.telephone }}
                  </span>
                  <div class="conlink">
                    <span>
                      <a href="#" @click="editAddress(item, index)">编辑</a>
                      <a href="#" @click="deleteAddress(item, index)">删除</a>
                    </span>
                  </div>
                </el-card>
              </li>
            </ul>
          </div>
        </el-row>
      </div>
    </el-card>

    <el-dialog title="收货地址信息" :visible.sync="dialogVisible" width="500px">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item
          label="收件人"
          :label-width="formLabelWidth"
          prop="recipients"
        >
          <el-input v-model="form.recipients" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="收件人电话"
          :label-width="formLabelWidth"
          prop="telephone"
        >
          <el-input
            v-model="form.telephone"
            autocomplete="off"
            maxlength="11"
            show-word-limit
            oninput="value=value.replace(/[^\d]/g,'')"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="省市区/县"
          prop="address1"
          :label-width="formLabelWidth"
        >
          <el-cascader
            :options="cityData"
            v-model="form.address1"
          ></el-cascader>
        </el-form-item>
        <el-form-item
          label="详细地址"
          :label-width="formLabelWidth"
          prop="address2"
        >
          <el-input v-model="form.address2" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm('form')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import cityData from "../util/citydata";
import {
  addAddress,
  getAddress,
  editAddress,
  deleteAddress,
} from "../api/address";
export default {
  data() {
    return {
      cityData,
      addressInfo: [],
      dialogVisible: false,
      form: {
        id: 0,
        recipients: "",
        address: "",
        telephone: "",
        address1: "",
        address2: "",
      },
      formLabelWidth: "120px",
      rules: {
        recipients: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        telephone: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { max: 11, message: "填写正确的联系电话" },
          { min: 11, message: "填写正确的联系电话" },
        ],
        address1: [{ required: true, message: "请输入密码", trigger: "blur" }],
        address2: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      newIndex: 0,
    };
  },
  methods: {
    // 添加框
    addAddress() {
      this.dialogVisible = true;
      this.form = {};
    },
    //编辑
    editAddress(item, index) {
      this.form.id = item.id;
      this.form.recipients = item.recipients;
      this.form.telephone = item.telephone;
      this.form.address1 = item.address1;
      this.form.address2 = item.address2;
      this.newIndex = index;
      this.dialogVisible = true;
    },
    // 删除
    deleteAddress(item, index) { 
            this.$confirm("此操作将永久删除该收获地址, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteAddress(item.id)
          .then(({ data }) => {
            this.addressInfo.splice(index, 1);
            console.log(data);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      });
    },
    confirm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.form.id == undefined) {
            this.form.address =
              this.form.address1.join("") + this.form.address2;
            var id = localStorage.getItem("userId");
            addAddress(id, this.form).then(({ data }) => {
              this.addressInfo.push(data.data);
              this.dialogVisible = false;
            });
          } else {
            this.form.address =
              this.form.address1.join("") + this.form.address2;
            editAddress(this.form.id, this.form).then(({ data }) => {
              this.addressInfo.splice(this.newIndex, 1, data.data);
              this.dialogVisible = false;
            });
          }
        } else {
          this.$message.error("请填写完整");
        }
      });
    },
  },
  mounted() {
    var id = localStorage.getItem("userId");
    getAddress(id).then(({ data }) => {
      this.addressInfo = data.data;
    });
  },
};
</script>

<style scoped>
ul li {
  float: left;
  margin-right: 30px;
  margin-top: 20px;
}

.adressList .el-card {
  width: 250px;
  height: 210px;
}

.conlink {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.conlink a {
  padding-left: 10px;
}
</style>